<script setup lang="ts">
import type { DailyRecommendations } from '@/types/home'

const props = defineProps<{
  viewsList: DailyRecommendations[]
}>()

// 添加预览单张图片的方法
const previewImage = (url: string | undefined) => {
  if (!url) return

  uni.previewImage({
    current: url,
    urls: [url], // 只传入当前图片的URL
    indicator: 'number',
    loop: false, // 单张图片不需要循环
  })
}
</script>

<template>
  <view class="index-views">
    <view class="title">
      <view class="name">天门山景韵</view>
      <navigator class="more" url="/pages/imageAll/imageAll">全部 ></navigator>
    </view>

    <view class="content">
      <scroll-view :scroll-x="true" class="scroll">
        <view class="box" v-for="item in viewsList" :key="item.id">
          <image
            :src="item.recommendationImg"
            mode="aspectFill"
            class="images"
            @click="previewImage(item.recommendationImg)"
          ></image>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss">
.index-views {
  padding: 20rpx 0 20rpx 1rpx;
  margin-left: 5rpx;
  margin-right: 5rpx;

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx 20rpx 4rpx;
    position: relative;

    .name {
      font-size: 38rpx;
      font-weight: 600;
      color: #333333;
      position: relative;
      padding-left: 10rpx;

      // 添加左侧蓝色装饰条
      &::before {
        content: '';
        position: absolute;
        left: -10rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 32rpx;
        background-color: #4169e1; // 蓝色装饰条
        border-radius: 3rpx;
      }
    }

    .more {
      font-size: 28rpx;
      color: #666666;
    }
  }

  .content {
    width: 100%; // 调整为100%，以使其占据父容器的全宽
    margin-left: 0;
    margin-right: 0;
    margin-top: 20rpx;

    .scroll {
      white-space: nowrap;
      padding-left: 5rpx; // 为滚动视图添加内边距
      padding-right: 5rpx; // 为滚动视图添加内边距

      .box {
        width: 430rpx;
        height: 430rpx;
        display: inline-block;
        margin-right: 15rpx;

        .images {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
    }
  }
}
</style>
